// ------------------获取数据并渲染----------------------
function renderCategory() {
  axios.get("/my/category/list").then((res) => {
    let { status, data } = res.data;
    if (status === 0) {
      let str = "";
      data.forEach((item) => {
        str += `
        <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id='${item.id}' data-name='${item.name}' data-alias='${item.alias}' type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id='${item.id}' type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
        `;
      });
      // 循环结束,把拼接得到的很多额tr放到tbody中
      $("tbody").html(str);
    }
  });
}
renderCategory();

// ----------------------删除功能________________________
$("tbody").on("click", ".del", function () {
  // $(this) 表示删除按钮
  let id = $(this).data("id");
  // 对应敏感操作,必须询问
  layer.confirm("确定删除吗?", function (index) {
    axios.get(`/my/category/delete?id=${id}`).then((res) => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        //更新页面的数据
        renderCategory();
      }
    });
    layer.close(index);
  });
});

// --------------------------添加功能------------------------
// 1.点击添加按钮,出现弹窗
let addIndex;
$('button:contains("添加类别")').on("click", function () {
  addIndex = layer.open({
    type: 1,
    title: "添加类别",
// 2.设置弹出的内容
    content: $("#tpl-add").html(),
    area: ["500px", "250px"],
  });
});

// 3.表单提交,发送ajax请求,完成添加
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  axios.post('/my/category/add', data).then(res => {
    let {status, message} = res.data;
    if (status === 0 ) {
      layer.msg(message);
      renderCategory();  //更新页面数据
      layer.close(addIndex);
    }
  })
})

// --------------------修改功能-----------------------
let editIndex;
// 1.点击编辑按钮,出现弹层
$('tbody').on('click', 'button:contains("编辑")', function () {
  let shuju = $(this).data(); //不给data()传递参数,表示获取全部的 data-xxx属性
  // console.log(shuju); {alias: "music", name: "音乐", id: 1}

  editIndex = layer.open({
    type: 1,
    title: '编辑类别',
// 2.设置弹出的内容
    content: $('#tpl-edit').html(),
    area: ['500px', '250px'],
    success: function () {
// 3.必须等弹层出来之后,保证表单已经存在了, input 已经出现了, 再数据回填
      // 使用layui的form 模块,快速的数据回填
      let form = layui.form;
      form.val('edit', shuju);
    }
  })
})

// 4.表单提交,完成修改
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  axios.post('/my/category/update', data).then(res => {
    let {status, message} = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory();
      layer.close(editIndex);
    }
  })
})